<template>
  <div class="app-container">
    <el-dialog :title="titleList[flag]" :visible.sync="dialogVisible" width="50%" append-to-body>
      <el-form ref="form" :model="form" :disabled="flag==1">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="商品名称" prop="productId" required>
              <div v-if="flag==1">{{ form.productName }}</div>
              <el-select v-else v-model="form.productId" filterable style="width: 100%" placeholder="请选择">
                <el-option
                  v-for="item in goodList"
                  :key="item.id"
                  :label="item.productName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汽车型号" prop="carModel" required>
              <div v-if="flag==1">{{ form.carModel }}</div>
              <el-select v-else v-model="form.carModel" filterable style="width: 100%" placeholder="请选择">
                <el-option
                  v-for="item in modelList"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="垫子分类" prop="type" required>
              <div v-if="flag==1">{{ form.typeDesc }}</div>
              <el-select v-else v-model="form.type" style="width: 100%" placeholder="请选择">
                <el-option
                  v-for="item in dict.type.ims_car_matress_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传图纸" prop="imageUrl" required>
              <div v-if="flag==1">
                <div class="myImg" v-if="form.imageUrl">
                  <el-image
                    :src="form.imageUrl"
                    fit="contain"
                    :preview-src-list="[form.imageUrl]"
                  >
                  </el-image>
                </div>
                <div v-else>暂无</div>
              </div>
              <div v-else>
                <div class="myImg" v-if="form.imageUrl">
                  <i class="el-icon-close" @click="form.imageUrl=null"></i>
                  <el-image
                    :src="form.imageUrl"
                    fit="contain"
                    :preview-src-list="[form.imageUrl]"
                  >
                  </el-image>
                </div>
                <el-upload
                  v-else
                  :headers="headers"
                  :action="action"
                  :on-success="uploadSuccess"
                  :on-progress="uploadProgress"
                  :show-file-list="false"
                >
                  <el-button type="primary" plain>点击上传</el-button>
                </el-upload>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="cad文件" prop="fileUrl" required>
              <div v-if="flag==1">
                <el-link type="primary" v-if="form.fileUrl" @click="downloadFile(form.fileUrl)">附件</el-link>
                <div v-else>暂无</div>
              </div>
              <div v-else>
                <div v-if="form.fileUrl" style="display: flex">
                  <el-link type="primary" @click="downloadFile(form.fileUrl)">附件</el-link>
                  <div style="margin-left: 10px;color: red;cursor: pointer;font-size: 20px;"><i class="el-icon-close"
                                                                                                @click="form.fileUrl=null"></i>
                  </div>
                </div>
                <el-upload
                  v-else
                  :headers="headers"
                  :action="action"
                  :on-success="uploadSuccess2"
                  :on-progress="uploadProgress"
                  :show-file-list="false"
                >
                  <el-button type="primary" plain>点击上传</el-button>
                </el-upload>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <div v-if="flag==1">{{ form.remark }}</div>
              <el-input v-else type="textarea" v-model="form.remark" placeholder="请输入"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="dialogOk" v-if="flag!=1">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addGoodImg, listCarModel, updateGoodImg} from "../../../api/imsMng";
import {getToken} from '@/utils/auth'
import {listGood} from "../../../api/imsMng";
import good from "../../imsMng/good/index.vue";

export default {
  computed: {
    good() {
      return good
    }
  },
  dicts: ['ims_car_matress_type'],
  data() {
    return {
      flag: 0,
      loading: false,
      dialogVisible: false,
      form: {},
      titleList: ['新增', '详情', '修改'],
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      action: process.env.VUE_APP_BASE_API + '/ims/product/image/upload',
      goodList: [],
      modelList: [],
    }
  },
  methods: {
    show(flag, form) {
      this.flag = flag
      this.dialogVisible = true
      this.resetForm('form')
      this.form = form
      listGood({productType: 1, pageSize: -1}).then(res => {
        this.goodList = res.rows
      })
      listCarModel({ pageSize: -1}).then(res=>{
        this.modelList=res.data
      })
    },
    uploadProgress() {
      this.loading = true
    },
    uploadSuccess(res) {
      this.loading = false
      if (res.code == 200) {
        this.$set(this.form, 'imageUrl', res.data.imageUrl)
      } else {
        this.$message.error(res.msg)
      }
    },
    uploadSuccess2(res) {
      this.loading = false
      if (res.code == 200) {
        this.$set(this.form, 'fileUrl', res.data.imageUrl)
      } else {
        this.$message.error(res.msg)
      }
    },
    downloadFile(fileUrl) {
      window.open(fileUrl)
    },
    dialogOk() {
      this.$refs.form.validate(e => {
        if (e) {
          if (this.flag == 2) {
            this.loading = true
            updateGoodImg(this.form).then(res => {
              this.$emit('ok')
              this.dialogVisible = false
              this.$message.success('修改成功')
            })
          } else {
            this.loading = true
            addGoodImg(this.form).then(res => {
              this.$emit('ok')
              this.dialogVisible = false
              this.$message.success('新增成功')
            })
          }
        }
      })
    },
  }
}
</script>
